<template>
  <div class="workbench-container">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-info">
        <h2>欢迎回来，管理员</h2>
        <p>{{ currentTime }}</p>
      </div>
      <div class="weather-info">
        <el-icon :size="24"><Sunny /></el-icon>
        <span>晴天 26°C</span>
      </div>
    </div>



    <!-- 主体内容两列布局 -->
    <div class="main-content">
      <el-row :gutter="40">
        <!-- 左侧：待处理工作 -->
        <el-col :span="12">
          <!-- 待处理工作 -->
          <el-card class="pending-work-card" shadow="hover">
            <template #header>
              <span>待处理工作</span>
            </template>
            <div class="pending-work-list">
              <div v-for="group in pendingWorks" :key="group.group" class="pending-group">
                <div class="pending-group-title">{{ group.group }}</div>
                <div v-for="item in group.items" :key="item.label" class="pending-item" @click="item.count > 0 && router.push(item.route)" :class="{ clickable: item.count > 0 }">
                  <span>{{ item.label }}</span>
                  <span class="pending-count" :class="{ zero: item.count === 0 }">{{ item.count }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 右侧：快捷操作、待办事项 -->
        <el-col :span="12">
          <!-- 快捷操作 -->
          <el-card class="quick-actions-card" shadow="hover">
            <template #header>
              <span>快捷操作</span>
            </template>
            <div class="quick-actions">
              <div 
                v-for="action in quickActions" 
                :key="action.key"
                class="action-item"
                @click="handleQuickAction(action)"
              >
                <div class="action-icon" :style="{ backgroundColor: action.color }">
                  <el-icon :size="20"><component :is="action.icon" /></el-icon>
                </div>
                <span>{{ action.label }}</span>
              </div>
            </div>
          </el-card>

          <!-- 待办事项 -->
          <el-card class="todo-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>待办事项</span>
                <el-button type="primary" size="small" @click="openAddTodo">添加</el-button>
              </div>
            </template>
            <div class="todo-list">
              <div v-for="todo in todoList" :key="todo.id" class="todo-item">
                <el-checkbox v-model="todo.completed" @change="updateTodo(todo)" style="flex:1; overflow:hidden;">
                  <el-tooltip :content="todo.title" placement="top" effect="dark">
                    <span class="todo-title" :class="{ completed: todo.completed }">{{ todo.title }}</span>
                  </el-tooltip>
                </el-checkbox>
                <div class="todo-actions">
                  <el-button type="primary" size="small" circle @click="openEditTodo(todo)">
                    <el-icon><Edit /></el-icon>
                  </el-button>
                  <el-button type="danger" size="small" circle @click="removeTodo(todo.id)">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </div>
              </div>
              <div v-if="todoList.length === 0" class="empty-todo">
                暂无待办事项
              </div>
            </div>
            <!-- 新增/编辑待办弹窗 -->
            <el-dialog v-model="todoDialog" :title="editingTodo ? '编辑待办' : '添加待办'" width="360px" @close="todoInput = ''">
              <div style="display: flex; align-items: center;">
                <el-input
                  v-model="todoInput"
                  placeholder="请输入待办内容"
                  maxlength="50"
                  show-word-limit
                  style="flex: 1; white-space: nowrap; overflow-x: auto;"
                  @keyup.enter="confirmTodo"
                />
              </div>
              <template #footer>
                <el-button @click="todoDialog = false">取消</el-button>
                <el-button type="primary" @click="confirmTodo">确定</el-button>
              </template>
            </el-dialog>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 公告预览弹窗 -->
      <el-dialog
        v-model="announcementPreviewVisible"
        :title="currentAnnouncement?.title || '公告详情'"
        width="800px"
        :close-on-click-modal="true"
        center
      >
        <div v-if="currentAnnouncement" class="announcement-preview">
          <div class="preview-pc-card">
            <div class="preview-header">
              <div class="preview-title">{{ currentAnnouncement.title }}</div>
              <div class="preview-meta">
                <span class="preview-time">{{ currentAnnouncement.time }}</span>
                <el-tag v-if="currentAnnouncement.priority" :type="getPriorityType(currentAnnouncement.priority)" size="small">
                  {{ getPriorityText(currentAnnouncement.priority) }}
                </el-tag>
              </div>
            </div>
            <el-divider />
            <div class="preview-content" v-html="currentAnnouncement.content"></div>
          </div>
        </div>
        <template #footer>
          <el-button @click="announcementPreviewVisible = false">关闭</el-button>
          <el-button type="primary" @click="goToAnnouncementManage">管理公告</el-button>
        </template>
      </el-dialog>
      
      <!-- 活动详情弹窗 -->
      <el-dialog
        v-model="activityDetailVisible"
        :title="selectedActivity?.text || '活动详情'"
        width="600px"
        :close-on-click-modal="true"
        center
      >
        <div v-if="selectedActivity" class="activity-detail">
          <div class="detail-header">
            <el-avatar :size="48" :src="selectedActivity.avatar">
              <el-icon><User /></el-icon>
            </el-avatar>
            <div class="detail-info">
              <div class="user-name">{{ selectedActivity.userName }}</div>
              <div class="activity-time">{{ selectedActivity.time }}</div>
              <el-tag :type="getActivityTypeTag(selectedActivity.type)" size="small">
                {{ getActivityTypeText(selectedActivity.type) }}
              </el-tag>
            </div>
          </div>
          <el-divider />
          <div class="detail-content">
            <div class="activity-description">{{ selectedActivity.description }}</div>
            <div class="activity-details">
              <div v-for="detail in selectedActivity.details" :key="detail.key" class="detail-item">
                <span class="detail-label">{{ detail.label }}:</span>
                <span class="detail-value">{{ detail.value }}</span>
              </div>
            </div>
          </div>
        </div>
        <template #footer>
          <el-button @click="activityDetailVisible = false">关闭</el-button>
          <el-button 
            v-if="selectedActivity?.relatedId" 
            type="primary" 
            @click="goToRelatedPage(selectedActivity)"
          >
            查看相关详情
          </el-button>
        </template>
      </el-dialog>
      
      <!-- 下方平铺：系统公告和最近活动 -->
      <el-row :gutter="40" style="margin-top: 0;">
        <el-col :span="12">
          <el-card class="announcement-card" shadow="hover">
            <template #header>
              <span>系统公告</span>
            </template>
            <div class="announcement-list">
              <div 
                v-for="announcement in announcements" 
                :key="announcement.id" 
                class="announcement-item"
                @click="viewAnnouncement(announcement)"
              >
                <div class="announcement-title">{{ announcement.title }}</div>
                <div class="announcement-time">{{ announcement.time }}</div>
                <div class="announcement-content" v-html="getContentPreview(announcement.content)"></div>
                <div class="announcement-action">
                  <el-button type="primary" size="small" text>查看详情</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="activity-card" shadow="hover">
            <template #header>
              <span>最近活动</span>
            </template>
            <div class="activity-list">
              <div 
                v-for="activity in recentActivities" 
                :key="activity.id" 
                class="activity-item"
                @click="viewActivityDetail(activity)"
              >
                <div class="activity-avatar" @click.stop="viewUserProfile(activity)">
                  <el-avatar :size="32" :src="activity.avatar">
                    <el-icon><User /></el-icon>
                  </el-avatar>
                </div>
                <div class="activity-content">
                  <div class="activity-text">{{ activity.text }}</div>
                  <div class="activity-time">{{ activity.time }}</div>
                </div>
                <div class="activity-actions">
                  <el-button 
                    v-if="activity.relatedId" 
                    type="primary" 
                    size="small" 
                    text
                    @click.stop="goToRelatedPage(activity)"
                  >
                    查看详情
                  </el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  Sunny,
  ShoppingCart,
  User,
  Goods,
  Money,
  TrendCharts,
  ArrowUp,
  ArrowDown,
  Delete,
  Plus,
  Bell,
  Setting,
  Document,
  Service,
  Box,
  Promotion,
  Edit
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 当前时间
const currentTime = ref('')
let timeInterval: number

// 更新当前时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}


// 图表周期
const chartPeriod = ref('7')






// 快捷操作
const quickActions = ref([
  {
    key: 'add-product',
    label: '添加商品',
    icon: 'Plus',
    color: '#409eff',
    route: '/product/list'
  },
  {
    key: 'order-manage',
    label: '订单管理',
    icon: 'ShoppingCart',
    color: '#67c23a',
    route: '/order/list'
  },
  {
    key: 'member-manage',
    label: '会员管理',
    icon: 'User',
    color: '#e6a23c',
    route: '/member/list'
  },
  {
    key: 'coupon-manage',
    label: '优惠券',
    icon: 'Promotion',
    color: '#f56c6c',
    route: '/operation/coupon'
  },
  {
    key: 'service-center',
    label: '客服中心',
    icon: 'Service',
    color: '#909399',
    route: '/service/session'
  },
  {
    key: 'system-settings',
    label: '系统设置',
    icon: 'Setting',
    color: '#9c27b0',
    route: '/settings/staff'
  }
])

// 待办事项
const todoList = ref([
  {
    id: 1,
    title: '审核新商品申请',
    completed: false
  },
  {
    id: 2,
    title: '处理退款申请',
    completed: false
  },
  {
    id: 3,
    title: '更新系统公告',
    completed: true
  },
  {
    id: 4,
    title: '检查库存预警',
    completed: false
  }
])



// 系统公告
const announcements = ref([
  {
    id: 1,
    title: '系统维护通知',
    time: '2024-01-15 10:00',
    priority: 'high',
    content: '<p>系统将于今晚22:00-24:00进行维护升级，期间可能影响部分功能使用。</p><p>维护内容包括：</p><ul><li>数据库优化</li><li>系统性能提升</li><li>安全补丁更新</li></ul><p>维护期间可能影响以下功能：</p><ul><li>用户登录</li><li>订单处理</li><li>支付功能</li></ul><p>请提前做好相关工作安排，感谢您的理解与支持。</p>'
  },
  {
    id: 2,
    title: '新功能上线',
    time: '2024-01-14 14:30',
    priority: 'medium',
    content: '<p>首页装修功能已上线，支持可视化拖拽布局，欢迎体验使用。</p><p><strong>主要功能：</strong></p><ul><li>拖拽式组件布局</li><li>实时预览效果</li><li>多套模板选择</li><li>响应式设计</li></ul><p>使用方法：</p><ol><li>进入首页装修页面</li><li>选择模板或自定义布局</li><li>拖拽组件到指定位置</li><li>实时预览效果</li><li>保存并发布</li></ol>'
  },
  {
    id: 3,
    title: '安全提醒',
    time: '2024-01-13 09:15',
    priority: 'urgent',
    content: '<p>请及时修改密码，确保账号安全，建议使用强密码。</p><p><strong>密码要求：</strong></p><ul><li>至少8位字符</li><li>包含大小写字母</li><li>包含数字和特殊字符</li><li>避免使用常见密码</li></ul><p><strong>安全建议：</strong></p><ul><li>定期更换密码</li><li>不同平台使用不同密码</li><li>开启双因素认证</li><li>及时更新安全设置</li></ul>'
  }
])

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    type: 'product',
    text: '张三添加了新商品"iPhone 15 Pro"',
    description: '添加了新的商品信息，包括商品名称、价格、库存等详细信息',
    userName: '张三',
    avatar: '',
    time: '2分钟前',
    timestamp: Date.now() - 2 * 60 * 1000,
    relatedId: 1001,
    relatedType: 'product',
    details: [
      { key: 'productName', label: '商品名称', value: 'iPhone 15 Pro' },
      { key: 'price', label: '价格', value: '¥8999' },
      { key: 'stock', label: '库存', value: '50件' }
    ]
  },
  {
    id: 2,
    type: 'order',
    text: '李四处理了订单#20240115001',
    description: '完成了订单的审核和发货处理，更新了订单状态',
    userName: '李四',
    avatar: '',
    time: '5分钟前',
    timestamp: Date.now() - 5 * 60 * 1000,
    relatedId: 20240115001,
    relatedType: 'order',
    details: [
      { key: 'orderId', label: '订单号', value: '#20240115001' },
      { key: 'status', label: '状态', value: '已发货' },
      { key: 'amount', label: '金额', value: '¥1299' }
    ]
  },
  {
    id: 3,
    type: 'system',
    text: '王五更新了系统配置',
    description: '修改了系统的基础配置参数，包括安全设置和性能优化',
    userName: '王五',
    avatar: '',
    time: '10分钟前',
    timestamp: Date.now() - 10 * 60 * 1000,
    relatedId: null,
    relatedType: 'system',
    details: [
      { key: 'configType', label: '配置类型', value: '系统安全' },
      { key: 'changeCount', label: '修改项数', value: '3项' },
      { key: 'impact', label: '影响范围', value: '全局' }
    ]
  },
  {
    id: 4,
    type: 'service',
    text: '赵六回复了客服工单',
    description: '及时回复了用户的客服咨询，解决了用户的问题',
    userName: '赵六',
    avatar: '',
    time: '15分钟前',
    timestamp: Date.now() - 15 * 60 * 1000,
    relatedId: 5001,
    relatedType: 'ticket',
    details: [
      { key: 'ticketId', label: '工单号', value: '#5001' },
      { key: 'category', label: '问题类型', value: '账户问题' },
      { key: 'status', label: '处理状态', value: '已解决' }
    ]
  }
])

// 待处理工作
const pendingWorks = ref([
  {
    group: '客服',
    items: [
      { label: '待处理工单', count: 5, route: '/service/ticket' },
      { label: '待处理会话', count: 2, route: '/service/session' },
      { label: '待分配工单', count: 1, route: '/service/ticket?status=unassigned' },
      { label: '待回访工单', count: 0, route: '/service/ticket?status=callback' }
    ]
  },
  {
    group: '库管',
    items: [
      { label: '待入库商品', count: 3, route: '/warehouse/inventory?status=to-in' },
      { label: '待出库商品', count: 1, route: '/warehouse/inventory?status=to-out' },
      { label: '待打包称重', count: 2, route: '/warehouse/inventory?status=to-pack' },
      { label: '库存预警', count: 0, route: '/warehouse/inventory?status=warning' },
      { label: '库存盘点', count: 0, route: '/warehouse/inventory' }
    ]
  },
  {
    group: '财务',
    items: [
      { label: '待付款复核', count: 2, route: '/settings/finance?type=pay-review' },
      { label: '待退款处理', count: 1, route: '/settings/finance?type=refund' },
      // { label: '待发票开具', count: 0, route: '/settings/finance?type=invoice' }
    ]
  },
  {
    group: '领导',
    items: [
      { label: '待审批事项', count: 4, route: '/settings/workflow?type=approval' }
    ]
  },
  {
    group: '订单',
    items: [
      { label: '待发货订单', count: 3, route: '/order/list?status=to-ship' },
      { label: '待签收订单', count: 1, route: '/order/list?status=to-sign' },
      // { label: '物流异常处理', count: 0, route: '/order/list?status=logistics-error' }
    ]
  },
  // 会员分组已彻底删除
  {
    group: '运营',
    items: [
      { label: '待审核站内分享', count: 0, route: '/operation/copywriting-manage?status=share-in' },
      { label: '待审核站外分享', count: 0, route: '/operation/copywriting-manage?status=share-out' },
      { label: '待审核商品评价', count: 0, route: '/operation/copywriting-manage?status=review' }
    ]
  }
])

// 新增：待办输入弹窗相关
const todoDialog = ref(false)
const todoInput = ref('')
const editingTodo = ref<any>(null)

// 公告预览相关
const announcementPreviewVisible = ref(false)
const currentAnnouncement = ref<any>(null)

// 活动详情相关
const activityDetailVisible = ref(false)
const selectedActivity = ref<any>(null)

// 打开添加弹窗
const openAddTodo = () => {
  todoInput.value = ''
  editingTodo.value = null
  todoDialog.value = true
}
// 打开编辑弹窗
const openEditTodo = (todo: any) => {
  todoInput.value = todo.title
  editingTodo.value = todo
  todoDialog.value = true
}
// 确认添加/编辑
const confirmTodo = () => {
  const val = todoInput.value.trim()
  if (!val) {
    ElMessage.warning('请输入待办内容')
    return
  }
  if (editingTodo.value) {
    editingTodo.value.title = val
    ElMessage.success('修改成功')
  } else {
    const newTodo = {
      id: Date.now(),
      title: val,
      completed: false
    }
    todoList.value.unshift(newTodo)
    ElMessage.success('添加待办成功')
  }
  todoDialog.value = false
}

// 快捷操作处理
const handleQuickAction = (action: any) => {
  if (action.route) {
    router.push(action.route)
  } else {
    ElMessage.info(`点击了${action.label}`)
  }
}

// 添加待办
const addTodo = () => {
  const newTodo = {
    id: Date.now(),
    title: '新的待办事项',
    completed: false
  }
  todoList.value.unshift(newTodo)
  ElMessage.success('添加待办成功')
}

// 更新待办
const updateTodo = (todo: any) => {
  ElMessage.success(todo.completed ? '已完成' : '已取消完成')
}

// 删除待办
const removeTodo = (id: number) => {
  const index = todoList.value.findIndex(todo => todo.id === id)
  if (index > -1) {
    todoList.value.splice(index, 1)
    ElMessage.success('删除成功')
  }
}

// 查看公告详情
const viewAnnouncement = (announcement: any) => {
  // 直接打开PC端预览弹窗
  showAnnouncementPreview(announcement)
}

// 显示公告预览
const showAnnouncementPreview = (announcement: any) => {
  currentAnnouncement.value = announcement
  announcementPreviewVisible.value = true
}

// 获取优先级类型
const getPriorityType = (priority: string) => {
  const typeMap: Record<string, string> = {
    'low': 'info',
    'medium': 'warning',
    'high': 'danger',
    'urgent': 'danger'
  }
  return typeMap[priority] || 'info'
}

// 获取优先级文本
const getPriorityText = (priority: string) => {
  const textMap: Record<string, string> = {
    'low': '低',
    'medium': '中',
    'high': '高',
    'urgent': '紧急'
  }
  return textMap[priority] || '中'
}

// 跳转到公告管理页面
const goToAnnouncementManage = () => {
  router.push('/operation/announcement-manage')
  announcementPreviewVisible.value = false
}

// 获取内容预览
const getContentPreview = (content: string) => {
  const text = content.replace(/<[^>]+>/g, '')
  return text.length > 100 ? text.substring(0, 100) + '...' : text
}

// 查看活动详情
const viewActivityDetail = (activity: any) => {
  selectedActivity.value = activity
  activityDetailVisible.value = true
}

// 查看用户资料
const viewUserProfile = (activity: any) => {
  ElMessage.info(`查看用户资料：${activity.userName}`)
  // 这里可以跳转到用户详情页面
  // router.push(`/member/detail?userId=${activity.userId}`)
}

// 跳转到相关页面
const goToRelatedPage = (activity: any) => {
  if (!activity.relatedId) return
  
  const routeMap: Record<string, string> = {
    'product': `/product/detail?id=${activity.relatedId}`,
    'order': `/order/detail?id=${activity.relatedId}`,
    'ticket': `/service/ticket/detail?id=${activity.relatedId}`,
    'member': `/member/detail?id=${activity.relatedId}`
  }
  
  const route = routeMap[activity.relatedType]
  if (route) {
    router.push(route)
  } else {
    ElMessage.warning('暂不支持该类型活动的详情查看')
  }
}

// 获取活动类型标签样式
const getActivityTypeTag = (type: string) => {
  const typeMap: Record<string, string> = {
    'product': 'success',
    'order': 'primary',
    'system': 'warning',
    'service': 'danger',
    'member': 'info'
  }
  return typeMap[type] || 'info'
}

// 获取活动类型文本
const getActivityTypeText = (type: string) => {
  const textMap: Record<string, string> = {
    'product': '商品操作',
    'order': '订单操作',
    'system': '系统操作',
    'service': '客服操作',
    'member': '会员操作'
  }
  return textMap[type] || '其他操作'
}

// 生命周期
onMounted(() => {
  updateTime()
  timeInterval = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})
</script>

<style scoped>
.workbench-container {
  padding: 20px 24px;
  background: #f5f7fa;
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
}

.welcome-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
}

.welcome-info h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.welcome-info p {
  margin: 0;
  opacity: 0.9;
  font-size: 14px;
}

.weather-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.main-content {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.stat-card {
  border: none;
  border-radius: 12px;
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 4px;
}

.stat-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-trend.up {
  color: #67c23a;
}

.stat-trend.down {
  color: #f56c6c;
}

.quick-actions-card,
.todo-card,
.pending-work-card,
.announcement-card,
.activity-card {
  margin-bottom: 12px;
  border: none;
  border-radius: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  text-align: center;
  color: #909399;
}

.chart-placeholder p {
  margin: 16px 0 8px 0;
  font-size: 16px;
}

.chart-placeholder small {
  font-size: 12px;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #f0f0f0;
}

.action-item:hover {
  background: #f5f7fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.todo-list {
  max-height: 300px;
  overflow-y: auto;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-title {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.todo-actions {
  display: flex;
  gap: 4px;
  min-width: 70px;
  justify-content: flex-end;
}

.completed {
  text-decoration: line-through;
  color: #909399;
}

.empty-todo {
  text-align: center;
  color: #909399;
  padding: 40px 0;
}

.announcement-list {
  max-height: 300px;
  overflow-y: auto;
}

.announcement-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  border-radius: 6px;
  margin: 4px 0;
}

.announcement-item:hover {
  background-color: #f5f7fa;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.announcement-item:last-child {
  border-bottom: none;
}

.announcement-title {
  font-weight: 500;
  margin-bottom: 4px;
  color: #303133;
}

.announcement-time {
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
}

.announcement-content {
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
  margin-bottom: 8px;
}

.announcement-action {
  text-align: right;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.announcement-item:hover .announcement-action {
  opacity: 1;
}



.activity-list {
  max-height: 300px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 6px;
  margin: 4px 0;
  position: relative;
}

.activity-item:hover {
  background-color: #f5f7fa;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: #909399;
}

.activity-actions {
  opacity: 0;
  transition: opacity 0.2s ease;
  margin-left: auto;
}

.activity-item:hover .activity-actions {
  opacity: 1;
}

/* 活动详情样式 */
.activity-detail {
  padding: 20px 0;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.detail-info {
  flex: 1;
}

.user-name {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 8px;
}

.detail-content {
  margin-top: 20px;
}

.activity-description {
  font-size: 16px;
  color: #2c3e50;
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.activity-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.detail-label {
  font-weight: 600;
  color: #495057;
  font-size: 14px;
}

.detail-value {
  color: #6c757d;
  font-size: 14px;
}

.pending-work-card {
  margin-bottom: 20px;
  border: none;
  border-radius: 12px;
}
.pending-work-list {
  padding: 4px 0;
}
.pending-group {
  margin-bottom: 12px;
}
.pending-group-title {
  font-weight: 500;
  color: #409eff;
  margin-bottom: 4px;
}
.pending-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 15px;
  cursor: default;
  color: #303133;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}
.pending-item:last-child {
  border-bottom: none;
}
.pending-item.clickable {
  cursor: pointer;
  color: #409eff;
}
.pending-item.clickable:hover {
  background: #f5f7fa;
}
.pending-count {
  font-weight: bold;
  min-width: 28px;
  text-align: right;
  color: #f56c6c;
}
.pending-count.zero {
  color: #bbb;
}

/* 公告预览样式 */
.announcement-preview {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 400px;
  padding: 24px;
  background: #f8f9fa;
}

.preview-pc-card {
  width: 100%;
  max-width: 700px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  padding: 40px;
}

.preview-header {
  margin-bottom: 24px;
}

.preview-title {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 12px;
  line-height: 1.4;
}

.preview-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #7f8c8d;
  font-size: 14px;
}

.preview-time {
  color: #95a5a6;
}

.preview-content {
  font-size: 16px;
  color: #2c3e50;
  line-height: 1.8;
  word-break: break-word;
}

.preview-content :deep(h1),
.preview-content :deep(h2),
.preview-content :deep(h3) {
  color: #2c3e50;
  margin: 20px 0 12px 0;
}

.preview-content :deep(p) {
  margin: 12px 0;
}

.preview-content :deep(ul),
.preview-content :deep(ol) {
  margin: 12px 0;
  padding-left: 20px;
}

.preview-content :deep(li) {
  margin: 6px 0;
}

.preview-content :deep(strong) {
  color: #2c3e50;
  font-weight: 600;
}
</style>